<style scoped>
    .layui-row {
        overflow: hidden;
    }
    .select-item {
        width: 34.333333%;
        float: right;
    }
    .layui-row:after, .layui-row:before {
        clear: none;
    }

    .layui-row {
        overflow: hidden;
    }
    .select-item {
        /*float: left;*/
        text-align: right;
        width: 100%;
        /*height: auto !important;*/
        word-break:break-all;
    }
    .layui-row:after, .layui-row:before {
        clear: none;
    }
    .layui-form >>> .layui-form-select{
        z-index: inherit;
    }
    .department >>> .layui-table td, .layui-table th {
        padding: 9px 2px;
        white-space: nowrap;
    }
    select{
        color: #eee
    }
    option{
        color: #000;
    }
    .layui-inline {
        /*padding: 5px 0;*/
    }
    .department >>> .layui-colla-icon {
        left: auto;
        right: 15px !important;
    }
    .department >>> .layui-table-cell {
        padding: 0 0 !important;
    }
    .department >>> .layui-table-box {
        overflow-y: auto;
        overflow-x: auto;
    }
    .department >>> .layui-table-body {
        overflow: initial;
    }
    .department >>> .layui-table-header {
        overflow: initial;
    }
</style>

<template>
    <div class="department">
        <div class="layui-row">
            <form class="layui-form " >
                <div  class="layui-col-lg4 select-item" style="text-align: right">
                    <div class="layui-inline" style="width: 160px">
                        <input type="text" name="searchStr" v-model="searchStr" placeholder="请输入结算单号" class="layui-input key">
                    </div>
                    <div class="layui-inline" style="width: 160px">
                        <select name="wlcompany" lay-search>
                            <option value="">请选择物流公司</option>
                            <option v-for="(item, index) in wlcompanys" :key="item.guid" :value="item.guid">{{item.name}}</option>
                        </select>
                    </div>
                    <div class="layui-inline" style="width: 160px">
                        <select name="status" lay-search lay-filter="status">
                            <option value="">请选择状态</option>
                            <option v-for="(item, index) in statusList" :key="item.dictkey" :value="item.dictkey">{{item.dicttext}}</option>
                        </select>
                    </div>
                    <button type="button" class="layui-btn sou" @click="search">搜索</button>
                </div>
            </form>
        </div>
        <table class="layui-table layui-form">
            <thead>
            <tr>
                <th>结算单号</th>
                <th>物流公司</th>
                <th>结算金额(元)</th>
                <th>备注</th>
                <th>状态</th>
                <th>提交人</th>
                <th>创建时间</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr class="id9" v-for="(item, index) in orders" :key="item.guid">
                <td>{{item.code}}</td>
                <td>{{item.customername}}</td>
                <td>{{item.amount}}</td>
                <td>{{item.remark}}</td>
                <td>{{item.statusname}}</td>
                <td>{{item.operator}}</td>
                <td>{{item.createtime}}</td>
                <td>
                    <a href="javascript:;" @click="viewIt(item.guid, item.code)">详情</a>
<!--                    <span v-if="item.status == 0"> | </span>-->
<!--                    <a href="javascript:;" v-if="item.status == 0" @click="del(item.guid)">删除</a>-->
                    <template  v-for="(node, index) in item.nodes" v-if=" filterPerm(node.permission, item.operatorid)">
                        <span> | </span>
                        <a href="javascript:" :key="node.guid" @click="doAct(node.operate, item.guid, node.guid, node.name, node.annex)" >{{node.name}}</a>
                    </template>
                </td>
            </tr>
            </tbody>
        </table>

        <Pagination :cur="currentPage" :all="totalPage" :callback="turnPage" ></Pagination>
    </div>
</template>

<script>
    import Pagination from '../common/Pagination.vue'
    let qs = require('qs');
    export default {
        name: 'WlPayExpensesList',
        components: {Pagination},
        data () {
            return {
                orders: [],
                currentPage: 1,
                totalPage: 0,
                wlcompanys: [],
                wlcompany: '',
                companyid: '',
                searchStr: '',
                statusList: [],
                status: '',
                userid: sessionStorage.userid,
                permissions: [],
            }
        },
        mounted() {
            this.getPermission();

            let that = this;
            layui.use(['form'], function () {
                var form = layui.form,
                    layer = layui.layer;
                that.getPageData();

                form.on('input',function(data){
                    that[data.elem.name] = data.elem.value;
                })
                form.on('select',function(data){
                    that[data.elem.name] = data.elem.value;
                })
            });
            this.getWlcompanys();
            this.getStatus();

        },
        updated: function () {
            layui.form.render('select');
            layui.form.render();
        },
        methods: {
            search: function() {
                this.getPageData('search');
            },
            turnPage: function(data){
                this.currentPage = data;
                this.getPageData();
            },
            getWlcompanys: function() {
                let that = this;
                this.$post('/sales/Sellform!getWlCompany.action').then(function (response) {
                    if (response.data.info != null) {
                        that.wlcompanys = response.data.info;
                        layui.form.render('select');
                    } else {
                        this.toastText('获取物流公司数据失败');
                    }
                })
            },
            getStatus: function() {
                let that = this;
                this.$post('/sales/Sellform!findDict.action', qs.stringify({type: 55})).then(function (response) {
                    if (response.statusText == "OK") {
                        that.statusList = response.data;
                        layui.form.render('select');
                    } else {
                        this.toastText('获取状态数据失败');
                    }
                })
            },
            getPermission: function() {
                this.axios({
                    method: 'get',
                    params:{opttype:16},
                    url: '/produce/OperatorPermission!getOperPerm.action?openid=' + localStorage.openid,
                }).then((response) => {
                    if (response.data.msg == 'success') {
                        this.$nextTick(() => {
                            this.permissions = response.data.permission;
                        })
                    } else {
                        this.toastError("获取权限数据失败");
                    }

                })
            },
            filterPerm: function(perm, operatorid) {
                let status = false;
                if (perm == 0) {
                    status = this.userid == operatorid;
                } else {
                    let permissions = this.permissions;
                    if (permissions.length == 0) return;
                    for (let i=0; i<permissions.length; i++) {
                        if (perm == permissions[i].permission) {
                            status = true;
                            //return status;

                        }
                    }

                }
                return status;
            },
            doAct: function (name, guid, nodeid, actname, annex) {
                let acts = this.$store.state.acts;
                if (name == 'start') {
                    this.doStart(guid, nodeid);
                } else if (name == 'payConfirm') {
                    this.doPayConfirm(guid, nodeid);
                } else {
                    this.$store.commit('setActParam', {guid:guid, nodeid: nodeid, title: actname, annex: annex});
                    this.$parent.switchPage(acts[name]);
                }
            },
            doStart: function(guid, nodeid) {
                let that = this;
                layer.confirm('确定要执行该操作？', function () {
                    that.axios({
                        method: 'get',
                        params:{wlsettlid: guid, nodeid: nodeid},
                        url: '/wlinfo/Wlsettlement!initiate.action',
                    }).then((response) => {
                        if(response.data.msg == "success"){
                            that.toastText('操作成功!');
                            that.getPageData();
                        }else if (response.data.msg == 'canotopt'){
                            that.toastError('不允许的操作!');
                        }else {
                            that.toastError('系统错误!');
                        }

                    })
                })
            },
            doPayConfirm: function(guid, nodeid) {
                let that = this;
                layer.prompt({title: '请输入意见内容，并确认', formType: 2}, function(text, index){
                    layer.close(index);
                    that.axios({
                        method: 'get',
                        params:{wlsettleid: guid, nodeid: nodeid, opinion: text},
                        url: '/wlinfo/Wlsettlement!payFreight.action',
                    }).then((response) => {
                        if(response.data.msg == "success"){
                            that.toastText('操作成功!');
                            that.getPageData();
                        }else if (response.data.msg == 'canotopt'){
                            that.toastError('不允许的操作!');
                        }else {
                            that.toastError('系统错误!');
                        }

                    })
                });


            },
            getPageData: function(type = '') {
                let that = this;
                let loader = layui.layer.load();

                let postData = {
                    pageSize: 15
                };
                if (type != 'search') {
                    postData.pageNo = that.currentPage;
                }
                postData.functiontype = 16;
                postData.search = that.searchStr;
                postData.companyid = that.wlcompany;
                postData.status = that.status;

                this.$post('/wlinfo/Wlsettlement!page.action', qs.stringify(postData))
                    .then(response => {
                        if (response.data.msg == 'success') {
                            //分页数据赋值
                            that.currentPage = response.data.pagelist.pageNo;
                            that.totalPage = response.data.pagelist.pageCount;

                            that.orders = response.data.pagelist.rows;
                        } else {
                            this.toast("系统错误");
                        }
                        layer.close(loader);
                    });
            },
            viewIt: function(id, code) {
                this.$parent.gid = id;
                this.$store.commit('setWlOrdercode', code)
                this.$parent.switchPage('WlViewPayExpenses');
            },
            del: function (id) {
                let that = this;
                layer.confirm('确定要删除该数据？', function () {
                    let loader = layer.load();
                        this.$post('/wlinfo/Wlsettlement!delete.action', qs.stringify({wlsettlid: id}))
                            .then(response => {
                                if (response.data.msg == 'success') {
                                    that.toast("删除成功");
                                    that.getPageData('search');
                                } else if (response.data.msg == 'canotDel') {
                                    this.toast('该数据不允许删除');
                                } else {
                                    this.toast("系统错误");
                                }

                                layer.close(loader);
                            });

                })
            },
        }
    }
</script>
